<template>
  <div class="usercenter-box">
    <div class="common-usercenter-box">
      <h6 class="common-title">开通分站</h6>
      <div class="myorderbox common-form-set">
        <form action="http://baota.111zh.cn/buyer/vipapply.html" class="layui-form">
<!--          <div class="layui-form-item">-->
<!--            <label class="layui-form-label">客户编号</label>-->
<!--            <div class="layui-input-inline" style="width:570px;">-->
<!--              <input type="text" name="uid" required="" lay-verify="required" value="10003" autocomplete="off" class="layui-input layui-disabled" readonly="" disabled="">-->
<!--            </div>-->
<!--          </div>-->
          <div class="layui-form-item">
            <label class="layui-form-label">套餐选择</label>
            <div class="layui-input-inline" style="width:570px;">
              <table class="layui-table" lay-skin="line" lay-size="sm">
                <colgroup>
                  <col width="50">
                  <col>
                  <col>
                  <col>
                  <col>
                </colgroup>
                <thead>
                <tr>
                  <th>选择</th>
                  <th>套餐名称</th>
                  <th>价格</th>
                  <th>赠送级别</th>
                  <th>版本</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
              </table>
            </div>
            <!--<div class="layui-input-inline" style="color: red; ">如果上级用户级别低于或者等于赠送级别，当前用户的上级将自动解绑,如果用户级别高于赠送级别，用户级别不变！</div>-->
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">二级域名</label>
            <div class="layui-input-inline" style="width: auto;margin-right: 0;">
              <div class="layui-form-mid layui-word-aux">http://</div>
            </div>
            <div class="layui-input-inline" style="width:260px;">
              <input type="text" name="qz" required="" lay-verify="required" placeholder="请输入二级域名前缀" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-input-inline" style="width:260px;">
              <select name="hz"></select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="" class="layui-disabled">没有选项</dd></dl></div>
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">网站名称</label>
            <div class="layui-input-inline" style="width:570px;">
              <input type="text" name="site_name" required="" lay-verify="required" placeholder="请输入网站名称" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">网站风格</label>
            <div class="layui-input-inline" style="width:570px;">
              <select name="vip_style">
                <option value="default">默认</option>
              </select><div class="layui-unselect layui-form-select"><div class="layui-select-title"><input type="text" placeholder="请选择" value="默认" readonly="" class="layui-input layui-unselect"><i class="layui-edge"></i></div><dl class="layui-anim layui-anim-upbit"><dd lay-value="default" class="layui-this">默认</dd></dl></div>
            </div>
          </div>

          <div class="layui-form-item">
            <label class="layui-form-label">搭建扣费</label>
            <div class="layui-input-inline" style="width:570px;">
              <input type="text" name="money" required="" lay-verify="required" value="" autocomplete="off" class="layui-input show-price" readonly="" disabled="" style="color: red;">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">交易密码</label>
            <div class="layui-input-inline" style="width:570px;">
              <input type="password" name="trade_password" required="" lay-verify="required" value="" placeholder="请输入您的交易密码" autocomplete="off" class="layui-input">
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-inline">
              <button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="submit">确认开通</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import CheckFilter from '@/components/checkFilter'
import DateFilter from '@/components/dateFilter'
import SelectFilter from '@/components/selectFilter'
import orderDetailDialog from '@/components/orderDetailDialog'
import pageMixin from '@/mixins/page'

const checkOptions = [
  {
    value: '0',
    label: '等待支付'
  },
  {
    value: '1',
    label: '支付失败'
  },
  {
    value: '2',
    label: '支付成功'
  },
  {
    value: '3',
    label: '退款'
  }
]
const payMap = {}
checkOptions.forEach((item) => {
  payMap[item.value] = item.label
})

const selectOptions = [
  {
    type: 'select',
    key: 'type',
    options: [
      {
        value: 'paySn',
        label: '商户单号'
      }
    ]
  },
  { type: 'input', key: 'typeValue', placeholder: '请输入关键字', width: 300 }
]

export default {
  layout: 'webIn',
  components: {
    CheckFilter,
    DateFilter,
    SelectFilter,
    orderDetailDialog
  },
  mixins: [pageMixin],
  async asyncData({ $axios }) {
    let payOptions = []
    const res = await $axios.get('/finance/rechargeMode/getListForClient', {
      params: {
        rechargeType: 1
      }
    })
    if (res.code === 1001 && res.body) {
      payOptions = res.body.map((item) => {
        return { value: item.rechargeModeID, label: item.rechargeName }
      })
    }
    return {
      payOptions
    }
  },
  data() {
    return {
      payMap,
      checkOptions,
      selectOptions,
      isLoading: true,
      tableData: []
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      this.isLoading = true
      const res = await this.$axios.post(
        '/finance/rechargeRecord/recordPage',
        null,
        {
          params: this.query
        }
      )
      if (res.code === 1001 && res.body) {
        this.tableData = res.body.records || []
        this.dataTotal = res.body.total
      }
      this.isLoading = false
    },
    doQuery() {
      const s1val = this.$refs.s1.queryVal()
      const c1val = this.$refs.c1.queryVal()
      const c2val = this.$refs.c1.queryVal()
      const d1val = this.$refs.d1.queryVal()
      const query = {}
      if (s1val.typeValue) {
        query[s1val.type] = s1val.typeValue
      }
      if (c1val) {
        query.payState = c1val
      }
      if (c2val) {
        query.rechargeModeID = c1val
      }
      this.query = Object.assign(this.query, query, d1val)
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'assets/style/layer.css';
@import 'assets/style/layui.css';
@import 'assets/style/style8/common.css';
@import 'assets/style/style8/style.css';
@import 'assets/style/style8/font_1451715_0505c2bxv7b7.css';
@import 'element-ui/lib/theme-chalk/index.css';
</style>
